<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="Number(page.current)"
    :page-sizes="[5, 10, 20, 50]"
    :page-size="page.size"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  >
  </el-pagination>
</template>

<script>
export default {
  name: 'MyPagination',
  props: {
    page: {
      type: Object,
      required: true
    },
    total: {
      type: Number,
      required: true
    }
  },
  methods: {
    handleSizeChange (val) {
      this.$emit('updateSize', val)
    },
    handleCurrentChange (val) {
      this.$emit('updateuCrrent', val)
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-pagination {
    margin-top: 20px;
    text-align: center;
    padding-bottom: 30px;
  }
</style>
